<template>
  <!-- 加载动画 -->
  <view class="loading-container" v-if="!sellOrderDetail">
    <view class="loading-spinner">
      <view class="loading-bounce"></view>
    </view>
    <text class="loading-text">加载中...</text>
  </view>

  <scroll-view v-else scroll-y class="page-container" :show-scrollbar="false" :enhanced="true" :bounces="true">
    <!-- 订单状态卡片 -->
    <view class="status-card" :class="getStatusCardClass()">
      <view class="status-icon" :class="getStatusIconClass()">
        <up-icon :name="getStatusIconName()" size="48rpx" color="#fff"></up-icon>
      </view>
      <view class="status-info">
        <text class="status-title">{{ getStatusText() }}</text>
        <text class="status-desc" v-if="sellOrderDetail.orderStatus === 0 && sellOrderDetail.closed === 0">
          请在 {{ formatSeconds(sellOrderDetail.remainSeconds) }} 内完成支付
        </text>
        <text class="status-desc" v-else>{{ getStatusDescription() }}</text>
      </view>
    </view>

    <!-- 地址信息 -->
    <view class="card address-card">
      <view class="address-content">
        <view class="location-icon">
          <up-icon name="map" size="40rpx" color="#999"></up-icon>
        </view>
        <view class="address-info">
          <view class="contact">
            <text class="name">{{ sellOrderDetail.consignee }}</text>
            <text class="mobile">{{ sellOrderDetail.mobile }}</text>
          </view>
          <text class="address">{{ sellOrderDetail.deliveryRegion.replace(/,/g, '') }} {{ sellOrderDetail.deliveryAddress }}</text>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="card goods-section">
      <view class="info-title">
        <view class="title-bar"></view>
        <text>商品信息</text>
      </view>
      <view v-for="detail in sellOrderDetail.details" :key="detail.id" class="goods-item">
        <view class="goods-content">
          <view class="goods-image">
            <album width="150rpx" height="150rpx" :showExtraImages="false"
                   :images="detail.images"
                   :maxCount="1" :previewEnabled="false"></album>
          </view>
          <view class="goods-info">
            <view class="title-wrapper">
              <text class="title clamp">{{ detail.productVo.productName }}</text>
              <text class="price">
                <text class="symbol">¥</text>{{ detail.unitPrice }}
              </text>
            </view>
            <view class="specs-wrapper">
              <text class="attr-box">{{ detail.specificationVo.specName }}</text>
              <text class="quantity">x{{ Number(detail.quantity).toFixed(0) }}</text>
            </view>
            <view class="refund-status" v-if="detail.refundVo">
              <text v-if="detail.refundVo.complete === 0 && detail.refundVo.status === 0" 
                    class="refund-tag refund-tag-pending">
                {{getRefundType(detail.refundVo.type)}}申请中
              </text>
              <text v-if="detail.refundVo.complete === 0 && detail.refundVo.status === 1" 
                    class="refund-tag refund-tag-success">
                {{getRefundType(detail.refundVo.type)}}申请成功
              </text>
              <text v-if="detail.refundVo.complete === 0 && detail.refundVo.status === 2" 
                    class="refund-tag refund-tag-fail">
                {{getRefundType(detail.refundVo.type)}}申请失败
              </text>
              <text v-if="detail.refundVo.complete === 1" 
                    class="refund-tag refund-tag-completed">
                {{getRefundType(detail.refundVo.type)}}售后完成
              </text>
            </view>
          </view>
        </view>
        <view class="action-buttons">
          <button class="btn btn-default" @click="handleShowService(detail)">联系客服</button>
          <button v-if="isValidRefundTime(sellOrderDetail) && !detail.refundVo"
                  class="btn btn-primary" @click="applyRefund(detail)">申请售后</button>
          <button v-if="detail.refundVo && detail.refundVo.complete === 0"
                  class="btn btn-info" @click="navigateToRefund(detail.refundVo.id)">售后中</button>
          <button v-if="isValidRefundTime(sellOrderDetail) && detail.refundVo && detail.refundVo.complete === 1"
                  class="btn btn-primary" @click="applyRefund(detail)">再次售后</button>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="card info-card">
      <view class="info-title">
        <view class="title-bar"></view>
        <text>订单信息</text>
      </view>
      <view class="info-item">
        <text class="item-label">商品金额</text>
        <text class="item-value price-value">¥{{ sellOrderDetail.totalAmount }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.remark">
        <text class="item-label">备注</text>
        <text class="item-value">{{ sellOrderDetail.remark }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">订单编号</text>
        <view class="item-value with-copy">
          <text>{{ sellOrderDetail.id }}</text>
          <up-copy :content="sellOrderDetail.id">
            <text class="copy-btn">复制</text>
          </up-copy>
        </view>
      </view>
      <view class="info-item">
        <text class="item-label">下单时间</text>
        <text class="item-value">{{ sellOrderDetail.createTime }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.payTime">
        <text class="item-label">支付时间</text>
        <text class="item-value">{{ sellOrderDetail.payTime }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.deliveryTime">
        <text class="item-label">发货时间</text>
        <text class="item-value">{{ sellOrderDetail.deliveryTime }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.closeTime">
        <text class="item-label">关闭时间</text>
        <text class="item-value">{{ sellOrderDetail.closeTime }}</text>
      </view>
    </view>

    <!-- 物流信息 -->
    <view class="card info-card" v-if="sellOrderDetail.logisticsCompany || sellOrderDetail.logisticsOrderNo">
      <view class="info-title">
        <view class="title-bar"></view>
        <text>物流信息</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.logisticsCompany">
        <text class="item-label">配送方式</text>
        <text class="item-value">{{ sellOrderDetail.logisticsCompany }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.logisticsOrderNo">
        <text class="item-label">物流单号</text>
        <view class="item-value with-copy">
          <text>{{ sellOrderDetail.logisticsOrderNo }}</text>
          <up-copy :content="sellOrderDetail.logisticsOrderNo">
            <text class="copy-btn">复制</text>
          </up-copy>
        </view>
      </view>
    </view>

    <!-- 发货信息 -->
    <view class="card info-card" v-if="sellOrderDetail.shipper">
      <view class="info-title">
        <view class="title-bar"></view>
        <text>发货信息</text>
      </view>
      <view class="info-item">
        <text class="item-label">发货人</text>
        <text class="item-value">{{ sellOrderDetail.shipper }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.shipperPhone">
        <text class="item-label">联系方式</text>
        <text class="item-value">{{ sellOrderDetail.shipperPhone }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.shipperRegion">
        <text class="item-label">发货区域</text>
        <text class="item-value">{{ sellOrderDetail.shipperRegion.replace(/,/g, ' ') }}</text>
      </view>
      <view class="info-item" v-if="sellOrderDetail.shipperAddress">
        <text class="item-label">具体地址</text>
        <text class="item-value">{{ sellOrderDetail.shipperAddress }}</text>
      </view>
    </view>

    <!-- 底部占位，防止被底部操作栏遮挡 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

  <!-- 底部操作栏 -->
  <view class="footer" v-if="sellOrderDetail && sellOrderDetail.orderStatus === 0 && sellOrderDetail.closed === 0">
    <view class="price-content">
      <text>实付款</text>
      <text class="price">¥{{ sellOrderDetail.totalAmount }}</text>
    </view>
    <button class="btn-pay pulse-animation" @click="pay(sellOrderDetail)">
      立即下单{{ formatSeconds(sellOrderDetail.remainSeconds) }}
    </button>
  </view>

  <!-- 客服弹窗 -->
  <up-popup mode="center" :show="showService" :closable="true" @close="showService = false" round="20">
    <view class="service-popup">
      <view class="popup-title">联系方式</view>
      <view class="service-list">
        <view class="service-item">
          <text class="service-label">微信号码</text>
          <view class="service-value">
            <text>{{ selectedDetail?.productVo.serviceWechat }}</text>
            <up-copy :content="selectedDetail?.productVo.serviceWechat">
              <text class="copy-btn">复制</text>
            </up-copy>
          </view>
        </view>
        <view class="service-item">
          <text class="service-label">手机号码</text>
          <view class="service-value">
            <text>{{ selectedDetail?.productVo.servicePhone }}</text>
            <text class="call-btn" @click="makePhoneCall(selectedDetail?.productVo.servicePhone)">
              拨打
            </text>
          </view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script>
import {getSellOrder} from "@/api/sell/sellOrder";
import {formatSeconds} from "../../../utils/ruoyi";
import dayjs from "dayjs";

export default {
  data() {
    return {
      sellOrderDetail: null,
      showMultiPay: false,
      showMultiPayCancel: false,
      orderDetailList: [],
      showService: false,
      detailId: '',
      timer: null,
      selectedDetail: null
    }
  },
  onLoad(option) {
    this.detailId = option.orderDetailId;
  },
  // 配置页面标题
  onNavigationBarButtonTap() {
    uni.navigateBack();
  },
  onShow() {
    getSellOrder(this.detailId).then(res => {
      this.sellOrderDetail = res.data
      if (this.sellOrderDetail.remainSeconds > 0 && this.sellOrderDetail.closed === 0) {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null;
        }
        this.timer = setInterval(() => {
          this.sellOrderDetail.remainSeconds--
          if (this.sellOrderDetail.remainSeconds <= 0) {
            clearInterval(this.timer)
            this.timer = null;
            uni.showToast({
              title: '订单已关闭',
              icon: 'none'
            })
            uni.navigateBack({delta: 1})
          }
        }, 1000)
      }
    })
  },
  methods: {
    getRefundType(type) {
      switch (type) {
        case 0:
          return '换货';
        case 1:
          return '退货退款';
        case 2:
          return '仅退款';
      }
    },
    navigateToRefund(refundId) {
      uni.navigateTo({
        url: `/pages/sellment/order/refundDetail?refundId=${refundId}`
      })
    },
    isValidRefundTime(item) {
      return (item.orderStatus !== 0
              || (item.orderStatus === 4 && dayjs() <= dayjs(item.completeTime).add(7, 'day')))
          && (item.closed !== 1)
    },
    formatSeconds,
    applyRefund(item) {
      uni.navigateTo({
        url: `/pages/sellment/order/refund?detailId=${item.id}`
      })
    },
    //显示优惠券面板
    pay(item) {
      console.log(item)
      uni.navigateTo({
        url: `/pages/sellment/money/pay?orderId=${item.id}`
      })
    },
    makePhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      })
    },
    handleShowService(detail) {
      this.showService = true;
      this.selectedDetail = detail;
    },
    getStatusIconName() {
      if (this.sellOrderDetail.closed === 1) {
        return 'close-circle';
      }
      
      const iconMap = {
        0: 'clock',
        1: 'gift',
        2: 'car',
        3: 'star',
        4: 'checkmark-circle'
      };
      return iconMap[this.sellOrderDetail.orderStatus] || 'clock';
    },
    getStatusIconClass() {
      if (this.sellOrderDetail.closed === 1) {
        return 'status-closed';
      }
      
      const classMap = {
        0: 'status-pending',
        1: 'status-shipping',
        2: 'status-receiving',
        3: 'status-reviewing',
        4: 'status-completed'
      };
      return classMap[this.sellOrderDetail.orderStatus] || '';
    },
    getStatusDescription() {
      if (this.sellOrderDetail.closed === 1) {
        return '订单已关闭';
      }
      
      const descMap = {
        0: '请尽快完成支付',
        1: '商家将尽快为您发货',
        2: '商品正在运输中',
        3: '请对收到的商品进行评价',
        4: '订单已完成'
      };
      return descMap[this.sellOrderDetail.orderStatus] || '';
    },
    getStatusText() {
      if (this.sellOrderDetail.closed === 1) {
        return '订单已关闭';
      }
      
      const statusMap = {
        0: '待下单',
        1: '待发货',
        2: '待收货',
        3: '待评价',
        4: '已完成'
      };
      return statusMap[this.sellOrderDetail.orderStatus] || '';
    },
    getStatusCardClass() {
      if (this.sellOrderDetail.closed === 1) {
        return 'status-card-closed';
      }
      
      const classMap = {
        0: 'status-card-pending',
        1: 'status-card-shipping',
        2: 'status-card-receiving',
        3: 'status-card-reviewing',
        4: 'status-card-completed'
      };
      return classMap[this.sellOrderDetail.orderStatus] || '';
    }
  }
}
</script>

<style lang="scss" scoped>
/* 页面容器 */
.page-container {
  height: 100vh;
  background: #f8f8f8;
}

/* 底部占位 */
.bottom-placeholder {
  height: calc(120rpx + env(safe-area-inset-bottom));
}

/* 底部操作栏 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .price-content {
    text {
      font-size: 26rpx;
      color: #666;
      margin-right: 8rpx;
    }

    .price {
      font-size: 36rpx;
      font-weight: 600;
      color: #e84d1c;
    }
  }

  .btn-pay {
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #ff6b00 0%, #e84d1c 100%);
    border-radius: 40rpx;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(232, 77, 28, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
    }
  }
}

/* 加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #fff;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

/* 状态卡片 */
.status-card {
  margin: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  animation: slideDown 0.5s ease-out;
  
  &.status-card-pending {
    background: linear-gradient(to right, #fff, #fff, #fff9ef);
  }
  
  &.status-card-shipping {
    background: linear-gradient(to right, #fff, #fff, #fff4ef);
  }
  
  &.status-card-receiving {
    background: linear-gradient(to right, #fff, #fff, #f0f7ff);
  }
  
  &.status-card-reviewing {
    background: linear-gradient(to right, #fff, #fff, #f0fff5);
  }
  
  &.status-card-completed {
    background: linear-gradient(to right, #fff, #fff, #f0f7ff);
  }
  
  &.status-card-closed {
    background: linear-gradient(to right, #fff, #fff, #f5f5f5);
  }
  
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100rpx;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
    z-index: 1;
    opacity: 0.6;
  }
  
  .status-icon {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    position: relative;
    z-index: 2;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    &.status-pending {
      background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%);
    }
    
    &.status-shipping {
      background: linear-gradient(135deg, #ff6b00 0%, #e84d1c 100%);
    }
    
    &.status-receiving {
      background: linear-gradient(135deg, #4097ff 0%, #2b85e4 100%);
    }
    
    &.status-reviewing {
      background: linear-gradient(135deg, #2dd173 0%, #19be6b 100%);
    }
    
    &.status-completed {
      background: linear-gradient(135deg, #3a9bff 0%, #2b85e4 100%);
    }
    
    &.status-closed {
      background: linear-gradient(135deg, #b0b0b0 0%, #999999 100%);
    }
  }
  
  .status-info {
    flex: 1;
    position: relative;
    z-index: 2;
    
    .status-title {
      display: block;
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 12rpx;
    }
    
    .status-desc {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

/* 地址卡片 */
.address-card {
  padding: 24rpx;
  
  .address-content {
    display: flex;
    align-items: flex-start;
    
    .location-icon {
      flex-shrink: 0;
      margin-right: 20rpx;
      margin-top: 8rpx;
    }
    
    .address-info {
      flex: 1;
      
      .contact {
        margin-bottom: 12rpx;
        
        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          margin-right: 20rpx;
        }
        
        .mobile {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .address {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

/* 商品区域 */
.goods-section {
  padding: 0;
  
  .goods-item {
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .goods-content {
    display: flex;
    padding: 24rpx;
    align-items: center;
    
    .goods-image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
      margin-right: 24rpx;
    }
    
    .goods-info {
      flex: 1;
      min-height: 150rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .title-wrapper {
        display: flex;
        flex-direction: column;
        margin-bottom: 12rpx;
        
        .title {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          line-height: 1.4;
          margin-bottom: 8rpx;
        }
        
        .price {
          font-size: 32rpx;
          font-weight: 600;
          color: #e84d1c;
          
          .symbol {
            font-size: 24rpx;
          }
        }
      }
      
      .specs-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;
        
        .attr-box {
          font-size: 24rpx;
          color: #999;
          padding: 6rpx 16rpx;
          background: #f5f5f5;
          border-radius: 12rpx;
        }
        
        .quantity {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .refund-status {
        margin-top: auto;

        .refund-tag {
          display: inline-block;
          font-size: 22rpx;
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-weight: 500;
          animation: fadeIn 0.3s ease-out;

          &.refund-tag-pending {
            color: #ff9900;
            background-color: rgba(255, 153, 0, 0.1);
            border: 1rpx solid rgba(255, 153, 0, 0.2);
          }

          &.refund-tag-success {
            color: #19be6b;
            background-color: rgba(25, 190, 107, 0.1);
            border: 1rpx solid rgba(25, 190, 107, 0.2);
          }

          &.refund-tag-fail {
            color: #e84d1c;
            background-color: rgba(232, 77, 28, 0.1);
            border: 1rpx solid rgba(232, 77, 28, 0.2);
          }

          &.refund-tag-completed {
            color: #2b85e4;
            background-color: rgba(43, 133, 228, 0.1);
            border: 1rpx solid rgba(43, 133, 228, 0.2);
          }
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    padding: 20rpx 24rpx;
    background: #fafafa;
    
    .btn {
      min-width: 140rpx;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 30rpx;
      font-size: 24rpx;
      border-radius: 30rpx;
      text-align: center;
      transition: all 0.2s ease;
      
      &.btn-default {
        color: #666;
        background: #f5f5f5;
        border: 1rpx solid #eee;

        &:active {
          background: #eeeeee;
        }
      }
      
      &.btn-primary {
        color: #fff;
        background: linear-gradient(135deg, #ff6b00 0%, #e84d1c 100%);
        box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);

        &:active {
          transform: scale(0.98);
          box-shadow: 0 1rpx 4rpx rgba(232, 77, 28, 0.2);
        }
      }
      
      &.btn-info {
        color: #fff;
        background: linear-gradient(135deg, #4097ff 0%, #2b85e4 100%);
        box-shadow: 0 2rpx 8rpx rgba(43, 133, 228, 0.2);

        &:active {
          transform: scale(0.98);
          box-shadow: 0 1rpx 4rpx rgba(43, 133, 228, 0.2);
        }
      }
    }
  }
}

/* 信息卡片 */
.info-card {
  padding: 0;
  
  .info-item {
    display: flex;
    padding: 20rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    transition: background-color 0.2s ease;
    
    &:hover {
      background-color: #fafafa;
    }
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-label {
      flex-shrink: 0;
      width: 180rpx;
      font-size: 26rpx;
      color: #666;
    }
    
    .item-value {
      flex: 1;
      font-size: 26rpx;
      color: #333;
      text-align: right;
      
      &.with-copy, &.with-arrow {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8rpx;
      }
      
      &.price-value {
        font-weight: 600;
        color: #e84d1c;
      }
    }
  }
}

/* 复制和拨打按钮 */
.copy-btn, .call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48rpx;
  min-width: 96rpx;
  font-size: 24rpx;
  border-radius: 24rpx;
  padding: 0 20rpx;
  transition: all 0.2s ease;
}

.copy-btn {
  color: #e84d1c;
  background: rgba(232, 77, 28, 0.1);
  
  &:active {
    background: rgba(232, 77, 28, 0.2);
  }
}

.call-btn {
  color: #2b85e4;
  background: rgba(43, 133, 228, 0.1);
  
  &:active {
    background: rgba(43, 133, 228, 0.2);
  }
}

/* 客服弹窗 */
.service-popup {
  padding: 40rpx;
  width: 560rpx;
  background: #fff;
  border-radius: 20rpx;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -16rpx;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background: #e84d1c;
      border-radius: 2rpx;
    }
  }
  
  .service-list {
    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      padding: 16rpx;
      border-radius: 12rpx;
      background: #f9f9f9;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .service-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .service-value {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20rpx;
        
        text {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

/* 动画 */
@keyframes bounce {
  0%, 100% { transform: scale(0); }
  50% { transform: scale(1.0); }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.pulse-animation {
  animation: pulse 2s infinite ease-in-out;
}

.status-card {
  animation: slideDown 0.5s ease-out;
}

.card {
  animation: slideUp 0.5s ease-out;
}

.refund-tag {
  animation: fadeIn 0.3s ease-out;
}

.btn-pay {
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    transform: rotate(30deg);
    animation: shimmer 3s infinite linear;
    z-index: 1;
    opacity: 0.6;
  }
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 卡片基础样式 */
.card {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  animation: slideUp 0.5s ease-out;
}

/* 标题样式 */
.info-title {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
    
  .title-bar {
    width: 6rpx;
    height: 30rpx;
    background: #e84d1c;
    border-radius: 3rpx;
    margin-right: 16rpx;
  }
    
  text {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
  }
}
</style>
